<project-header class="top-header"></project-header>
<project-page>

  <!-- Middle section -->
  <div class="middle-section">
    <div id="scrollable-content" class="middle-container has-scroll">
      <div class="middle-header">
        <div class="container-fluid">
          <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
          <alerts alerts="alerts"></alerts>
          <div ng-if="!loaded">{{'Loading' | translate}}...</div>
          <div ng-if="route">
            <h1>
              {{route.metadata.name}}
              <route-warnings ng-if="route.spec.to.kind !== 'Service' || services"
                              route="route"
                              service="services[route.spec.to.name]">
              </route-warnings>
              <small class="meta"><!--created-->{{'created'| translate}}<relative-timestamp timestamp="route.metadata.creationTimestamp"></relative-timestamp></small>
              <div class="pull-right dropdown">
                <a href="" class="dropdown-toggle resource-actions-dropdown" data-toggle="dropdown"><i class="fa fa-ellipsis-v"></i><span class="sr-only">Actions</span></a>
                <ul class="dropdown-menu actions action-button">
                  <li>
                    <edit-link
                      resource="route"
                      kind="routes"
                      alerts="alerts">
                    </edit-link>
                  </li>
                  <li>
                    <delete-link
                      resource-type="route"
                      resource-name="{{route.metadata.name}}"
                      project-name="{{route.metadata.namespace}}"
                      alerts="alerts">
                    </delete-link>
                  </li>
                </ul>
              </div>
            </h1>
            <labels labels="route.metadata.labels" clickable="true" kind="routes" project-name="{{route.metadata.namespace}}" limit="3"></labels>
          </div>
        </div>
      </div><!-- /middle-header-->
      <div class="middle-content">
        <div class="container-fluid">
          <div class="row" ng-if="route">
            <div class="col-md-12">
              <div class="resource-details">
                <dl class="dl-horizontal left">
                  <dt>{{'Hostname' | translate}}:</dt>
                  <dd>
                    <span ng-if="(route | isWebRoute)">
                      <a href="{{route | routeWebURL}}" target="_blank">{{route | routeLabel}}</a>
                    </span>
                    <span ng-if="!(route | isWebRoute)">
                      {{route | routeLabel}}
                    </span>
                  </dd>
                  <dt>{{'Path' | translate}}:</dt>
                  <dd>
                    <span ng-if="route.spec.path">{{route.spec.path}}</span>
                    <span ng-if="!route.spec.path"><em>{{'none' | translate}}</em></span>
                  </dd>
                  <dt>{{route.spec.to.kind || "Routes to" | translate}}:</dt>
                  <dd>
                    <a ng-href="{{route.spec.to.name | navigateResourceURL : route.spec.to.kind : route.metadata.namespace}}">{{route.spec.to.name}}</a>
                  </dd>
                  <dt>{{'TargetPort' | translate}}:</dt>
                  <dd>
                    <span ng-if="route.spec.port.targetPort">
                      {{route.spec.port.targetPort}}
                    </span>
                    <span ng-if="!route.spec.port.targetPort"><em>any</em></span>
                  </dd>
                  <div ng-if="route.spec.port.targetPort && route.spec.to.kind === 'Service' && (route | routeTargetPortMapping : services[route.spec.to.name])" class="help-block">
                    This target port will route to {{route | routeTargetPortMapping : services[route.spec.to.name]}}.
                  </div>
                </dl>
                <div style="margin-bottom: 10px;">
                  <h4>{{'TLSSettings' | translate}}</h4>
                  <dl class="dl-horizontal left" ng-if="route.spec.tls">
                    <dt>{{'Terminationtype' | translate}}:</dt>
                    <dd>{{route.spec.tls.termination}}</dd>
                    <dt ng-if-start="route.spec.tls.termination === 'edge'">{{'InsecureTraffic' |translate}}:</dt>
                    <dd ng-if-end>{{route.spec.tls.insecureEdgeTerminationPolicy || 'None'}}</dd>
                    <dt>{{'Certificate' | translate}}:</dt>
                    <dd>
                      <span ng-if="route.spec.tls.certificate" click-to-reveal><pre class="clipped">{{route.spec.tls.certificate}}</pre></span>
                      <span ng-if="!route.spec.tls.certificate"><em>{{'none' | translate}}</em></span>
                    </dd>
                    <dt>{{'Key' | translate}}:</dt>
                    <dd>
                      <span ng-if="route.spec.tls.key" click-to-reveal><pre class="clipped">{{route.spec.tls.key}}</pre></span>
                      <span ng-if="!route.spec.tls.key"><em>{{'none' | translate}}</em></span>
                    </dd>
                    <dt>{{'CACertificate' | translate}}:</dt>
                    <dd>
                      <span ng-if="route.spec.tls.caCertificate" click-to-reveal><pre class="clipped">{{route.spec.tls.caCertificate}}</pre></span>
                      <span ng-if="!route.spec.tls.caCertificate"><em>{{'none' | translate}}</em></span>
                    </dd>
                    <dt>{{'DestinationCACert' | translate}}:</dt>
                    <dd>
                      <span ng-if="route.spec.tls.destinationCACertificate" click-to-reveal><pre class="clipped">{{route.spec.tls.destinationCACertificate}}</pre></span>
                      <span ng-if="!route.spec.tls.destinationCACertificate"><em>{{'none' | translate}}</em></span>
                    </dd>
                  </dl>
                  <div ng-if="!route.spec.tls"><em>{{'TLSisnotenabledforthisroute' | translate}}</em></div>
                </div>
                <annotations annotations="route.metadata.annotations"></annotations>
              </div>
            </div><!-- /col-* -->
          </div>
        </div>
      </div><!-- /middle-content -->
    </div><!-- /middle-container -->
  </div><!-- /middle-section -->
</project-page>
